<template>
    <h-collapse>
        <template #title>
            <flexbox class="title">
                <span class="title">及时性与完成率</span>
                <img class="margin-l-8" src="@/assets/images/chart/tooltip.png" @click.stop="handleShowTipModal" />
            </flexbox>
        </template>
        <div class="card">
            <div class="card-cont">
                <h-pie-chart :option="option1" :defaultColor="defaultColor" />
                <h-pie-chart :option="option2" :defaultColor="defaultColor" />
            </div>
        </div>
    </h-collapse>
</template>

<script lang="ts">
import HCollapse from './HCollapse.vue';
import { HPieChart } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    name: 'insideChartsPmpChart',
    components: {
        HPieChart,
        HCollapse
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    emits: ['handleShowTipModal'],
    setup(props, { emit }) {
        const state = reactive<any>({
            option1: null,
            option2: null,
            defaultColor: ['#F7762A', '#1890FF', '#FFCD44', '#25A15F']
        });
        const initChartData = () => {
            setTimeout(() => {
                state.option1 = {
                    typeArr: ['延期完成', '按时完成'],
                    dataArr: [
                        {
                            value: props.detail.overTimeCount,
                            name: '延期完成'
                        },
                        {
                            value: props.detail.onTimeCount,
                            name: '按时完成'
                        }
                    ],
                    seriesName: '版本交付',
                    title: '版本交付',
                    numTotal: 0
                };
                state.option2 = {
                    typeArr: ['100%以上', '80-100%', '50-80%', '0-50%'],
                    dataArr: [
                        {
                            value: props.detail.gt100Count,
                            name: '100%以上'
                        },
                        {
                            value: props.detail.gt80ls100Count,
                            name: '80-100%'
                        },
                        {
                            value: props.detail.gt50ls80Count,
                            name: '50-80%'
                        },
                        {
                            value: props.detail.ls50Count,
                            name: '0-50%'
                        }
                    ],
                    seriesName: '版本完成率',
                    title: '版本完成率',
                    numTotal: 0
                };
            });
        };
        const handleShowTipModal = () => {
            emit('handleShowTipModal', 3);
        };
        initChartData();
        watch(
            () => props.detail,
            () => {
                initChartData();
            },
            {
                deep: true
            }
        );
        return {
            ...toRefs(state),
            handleShowTipModal,
            initChartData
        };
    }
});
</script>

<style scoped lang="less">
.card {
    min-height: 372px;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    &-cont {
        padding: 24px;
        height: 648px;
    }
}
</style>